<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>事件</title>
    <style>
        [v-cloak]{
            display:none;
        }
        .list{width:100%;height:25px;margin-bottom:10px;}
        .list.active{background-color:#0000FF;color:#FFFFFF;}
        .box{width:100px;height:100px;background: blue;position:absolute;z-index:1}
        .box.active{width:100px;height:100px;background: red}
    </style>
</head>
<body>
<div id="app" v-cloak>
    <ul>
        <li :class="{list:true,active:item.active}" v-for="(item,index) in list" :key="index" @click="checkedItem(index)">{{item.name}}-<button type="button" @click.stop="delItem(index)">删除</button></li>
    </ul>
    <!--<button type="button" @click.once="submitOrder()">提交订单</button>-->
    <button type="button" @click="submitOrder()">提交订单</button>
    <div :style="{left:moveX,top:moveY}" :class="{box:true,active:isActive}" @mouseover="isActive=true" @mouseout="isActive=false" @mousemove="moveBox($event)" @touchmove="touchmoveBox($event)" @touchstart="startBox($event)" @touchend="endBox()"></div>
    <input type="text" @keyup.enter="submit($event)" v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                list:[
                    {id:1,name:"张三",age:28,active:false},
                    {id:2,name:"李四",age:18,active:false},
                    {id:3,name:"王五",age:38,active:false}
                ],
                isSubmit:true,
                isActive:false,
                moveX:0,
                moveY:0,
                startX:0,
                startY:0,
                url:""
            }
        },
        methods:{
            checkedItem(index){
                // console.log(index);
                this.list[index].active=!this.list[index].active;
            },
            delItem(index){
                // console.log("删除");
                if(confirm("确认要删除吗？")){
                    this.list.splice(index,1);
                }
            },
            submitOrder(){
                //只提交一次
                if(this.isSubmit){
                    this.isSubmit=false;
                    alert("提交订单");
                }
            },
            moveBox(e){
                // console.log(e);
            },
            startBox(e){
                this.isActive=false
                this.startX=e.touches[0].pageX-parseInt(this.moveX);
                this.startY=e.touches[0].pageY-parseInt(this.moveY);
                // console.log(this.startX,this.startY);
            },
            touchmoveBox(e){
                this.moveX=e.touches[0].pageX-this.startX+"px";
                this.moveY=e.touches[0].pageY-this.startY+"px";
            },
            endBox(){
                this.isActive=true
            },
            submit(e){
                // console.log(e);
                window.open(this.url);
            }
        }
    })
</script>
</body>
</html>
